<template>
  <div class="demand-enterprise-select-container">
    <h2 class="page-title">需求企业选择</h2>
    
    <!-- 需求列表区域 -->
    <div 
      v-loading="loading" 
      element-loading-text="加载中..."
      class="loading-container"
    >
      <!-- 需求列表 -->
      <div v-if="unacceptedDemands.length > 0" class="demands-list">
        <div 
          v-for="demand in unacceptedDemands" 
          :key="demand.id" 
          class="demand-card"
        >
          <div class="demand-header">
            <h3 class="demand-title">{{ demand.title }}</h3>
            <el-tag 
              :type="getStatusType(demand.status)"
              size="small"
            >
              {{ getStatusText(demand.status) }}
            </el-tag>
          </div>
          
          <div class="demand-content">
            <p class="demand-description">{{ demand.description }}</p>
            <div class="demand-meta">
              <span class="meta-item">发布时间: {{ formatDate(demand.createTime) }}</span>
              <span class="meta-item">预算: {{ demand.budget || '面议' }}</span>
            </div>
          </div>
          
          <!-- 接单企业选择 -->
          <div class="enterprise-section">
            <el-button 
              type="primary" 
              size="small"
              @click="showEnterpriseList(demand)"
            >
              查看接单企业
            </el-button>
          </div>
        </div>
      </div>
      
      <!-- 无需求提示 -->
      <div v-else class="empty-state">
        <el-empty description="暂无已发布但未接单的需求"></el-empty>
      </div>
    </div>
    
    <!-- 企业列表对话框 -->
    <el-dialog
      v-model="enterpriseDialogVisible"
      :title="`为需求选择接单企业: ${selectedDemand?.title}`"
      width="80%"
    >
      <div v-if="potentialEnterprises.length > 0">
        <el-table :data="potentialEnterprises" style="width: 100%">
          <el-table-column prop="enterpriseName" label="企业名称" width="200"></el-table-column>
          <el-table-column prop="description" label="企业简介"></el-table-column>
          <el-table-column prop="contactPerson" label="联系人" width="120"></el-table-column>
          <el-table-column prop="contactPhone" label="联系电话" width="150"></el-table-column>
          <el-table-column prop="bidAmount" label="报价" width="100"></el-table-column>
          <el-table-column prop="bidRemark" label="报价说明"></el-table-column>
          <el-table-column label="操作" width="120" fixed="right">
            <template #default="scope">
              <el-button 
                type="primary" 
                size="small"
                @click="selectEnterprise(scope.row)"
              >
                选择接单
              </el-button>
            </template>
          </el-table-column>
        </el-table>
      </div>
      <div v-else class="empty-state">
        <el-empty description="暂无企业投标"></el-empty>
      </div>
    </el-dialog>
  </div>
</template>

<script setup>
import { onMounted } from 'vue';
import useDemandEnterpriseSelect from '../hooks/useDemandEnterpriseSelect';

// 使用自定义hook
const {
  loading,
  demandList,
  enterpriseDialogVisible,
  selectedDemand,
  potentialEnterprises,
  unacceptedDemands,
  getStatusText,
  getStatusType,
  formatDate,
  fetchUserDemands,
  showEnterpriseList,
  loadPotentialEnterprises,
  selectEnterprise
} = useDemandEnterpriseSelect();

// 页面加载时获取数据
onMounted(() => {
  fetchUserDemands();
});
</script>

<style scoped>
.demand-enterprise-select-container {
  padding: 20px;
  max-width: 1200px;
  margin: 0 auto;
}

.page-title {
  font-size: 24px;
  margin-bottom: 20px;
  color: #333;
}

.loading-container {
  min-height: 400px;
}

.demands-list {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(400px, 1fr));
  gap: 20px;
}

.demand-card {
  background: #fff;
  border-radius: 8px;
  padding: 20px;
  box-shadow: 0 2px 8px rgba(0, 0, 0, 0.1);
  transition: box-shadow 0.3s ease;
}

.demand-card:hover {
  box-shadow: 0 4px 16px rgba(0, 0, 0, 0.15);
}

.demand-header {
  display: flex;
  justify-content: space-between;
  align-items: center;
  margin-bottom: 12px;
}

.demand-title {
  font-size: 18px;
  font-weight: 600;
  margin: 0;
  color: #333;
  flex: 1;
  margin-right: 12px;
}

.demand-description {
  font-size: 14px;
  color: #666;
  line-height: 1.6;
  margin-bottom: 12px;
  display: -webkit-box;
  -webkit-line-clamp: 3;
  -webkit-box-orient: vertical;
  overflow: hidden;
}

.demand-meta {
  font-size: 12px;
  color: #999;
  display: flex;
  gap: 16px;
  margin-bottom: 16px;
}

.enterprise-section {
  margin-top: 16px;
  display: flex;
  justify-content: flex-end;
}

.empty-state {
  text-align: center;
  padding: 60px 0;
}

/* 响应式设计 */
@media (max-width: 768px) {
  .demands-list {
    grid-template-columns: 1fr;
  }
  
  .demand-enterprise-select-container {
    padding: 12px;
  }
  
  .demand-header {
    flex-direction: column;
    align-items: flex-start;
    gap: 8px;
  }
  
  .demand-meta {
    flex-direction: column;
    gap: 8px;
  }
}
</style>